<template>
  <div class="logo-container-horizontal">
    <!-- 这里是logo变更的位置 -->
    <van-remix-icon v-if="logo" class="logo" :icon-class="logo" />
    <span class="title hidden-xs-only" :title="title">
      {{ title }}
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import VanRemixIcon from '@/components/VanRemixIcon/index.vue'
import settings from '@/config/setting'

export default defineComponent({
  name: 'VanLogo',
  components: {
    VanRemixIcon
  },
  props: {},
  setup() {
    const logo = settings.logo
    const title = settings.title
    console.log(settings)
    return {
      logo,
      title
    }
  }
})
</script>

<style lang="scss" scoped>
@mixin logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 3px;
  color: #fff;
  vertical-align: middle;
}

@mixin title {
  display: inline-block;
  overflow: hidden;
  font-size: 18px;
  line-height: 45px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

@mixin container {
  position: relative;
  height: 45px;
  overflow: hidden;
  line-height: 45px;
  background: #2f3447;
}

.logo-container-horizontal {
  @include container;

  .logo {
    @include logo;
  }

  .title {
    @include title;
  }
}
</style>
